<template>
  <div class="history" ref="wrapper">
   <div class="wrapper" >
     <span v-if="historyLists.length > 0" class="title">历史查询：</span>
     <span class="his-box"
           v-for="(item, index) in historyLists"
           :key="item.id"
           @click="historyClick(item)">
      <span class="city-go">{{item.fromCityName || item.go}}</span>
        <i class="iconfont"
           :class="item.isTripState == 1 ? 'icon-youjiantou' : 'icon-wangfan--'"></i>
      <span class="city-back">{{item.toCityName || item.back}}</span>
    </span>
   </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll';

  export default {
    name: 'search-history',
    data() {
      return {}
    },
    props: {
      storageKey:{
        type: String,
        default: ''
      }
    },
    computed: {
      historyLists: function () {
        var that = this;
        var hisesStr = localStorage.getItem(that.storageKey);
        if(hisesStr) {
          return JSON.parse(hisesStr);
        }
        return [];
      }
    },
    mounted() {
      setTimeout(() => {
        this.scroll = new BScroll(this.$refs.wrapper, {
          scrollY: false, // 因为scrollY默认为true，其实可以省略
          scrollX: true,
          click: true
        })
      }, 20)
    },
    methods: {
      historyClick: function (e) {
        this.$emit('historyClick', e)
      },
      addHistory(curSearch) {
        var that = this;
        var hisStr = localStorage.getItem(that.storageKey)
        var histroys = []
        if (hisStr) {
          histroys = JSON.parse(hisStr)
        }
        if (histroys.length == 0) {
          histroys.push(curSearch)
        } else {
          var tmp = null
          $.each(histroys, function (i, his) {
            if (his.fromCityName) {
              if ((his.fromCityName == curSearch.fromCityName && his.toCityName == curSearch.toCityName) || (his.toCityName == curSearch.fromCityName && his.fromCityName == curSearch.toCityName)) {
                tmp = i
                return false
              }
            } else {
              if ((his.go == curSearch.go && his.back == curSearch.back) || (his.back == curSearch.go && his.go == curSearch.back)) {
                tmp = i
                return false
              }
            }

          })
          //找到相同搜索结果
          if (tmp != null) {
            histroys.splice(tmp, 1)
          }
          histroys.unshift(curSearch)
          histroys = histroys.slice(0, 5)
        }
        localStorage.setItem(that.storageKey, JSON.stringify(histroys))
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .history{
    width: 92%;
    display: flex;
    margin: .5rem auto;
    flex-wrap: wrap;
    color: #999;
    font-size: .7rem;
    line-height: 2;
    overflow: hidden;
    .wrapper {
      /*width: 100%;*/
      white-space: nowrap;
       >span {
        display: inline-block;
        margin-right: .625rem;
        box-sizing: border-box;
        vertical-align: center;
        justify-content: center;
        border-bottom: 1px #ddd dashed;
        &>* {
          flex: 1;
        }
        & .city-go {
          margin-right: .2rem;
        }
        & .city-back {
          margin-left: .2rem;
        }
      }
      /*> span:nth-child(3n) {*/
        /*margin-right: 0;*/
      /*}*/
      & .his-box {
        position: relative;
        margin-top: -.05rem;
      }
      & .iconfont {
        font-size: .8rem;
      }
      .title {
        margin-right: 0;
        font-size: .8rem;
        border-bottom: none;
      }
    }

  }
</style>
